<template>
  <div class="collect">
    <van-nav-bar
      title="歌单详情"
      left-text=""
      left-arrow
      style="background-color: rgb(61, 206, 238)"
      @click-left="goback"
    >
    </van-nav-bar>

    <van-card :title="listOne.name" :thumb="listOne.coverImgUrl">
      <template class="header" #tags>
        <van-tag plain type="danger">播放全部 +</van-tag>
        <van-tag plain>下载全部</van-tag><br />
        <van-tag plain>收藏</van-tag>
        <van-tag plain>分享</van-tag>
      </template>
    </van-card>

    <table>
      <tr style="font-size: 16px; color: #cecece">
        <td>序号</td>
        <td>歌名</td>
        <td>歌手</td>
        <td>专辑</td>
      </tr>
      <tr
        v-for="(item, index) in listTwo"
        :key="index"
        @click="jumpHandle(item.id)"
      >
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.ar[0].name }}</td>
        <td>{{ item.al.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { collectAPI } from "../services/collect";
export default {
  data() {
    return {
      listOne: [],
      listTwo: [],
    };
  },
  async created() {
    const songId = this.$route.query.id;
    const res = await collectAPI(songId);
    this.listOne = res.playlist;
    this.listTwo = res.playlist.tracks;
    // console.log(res.playlist.tracks);
  },
  methods: {
    jumpHandle(id) {
      this.$router.push({
        name: "Play",
        query: { id },
      });
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  width: 100vw;
  font-size: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.van-tag {
  height: 18px;
  border-radius: 10px;
  margin: 4px;
  padding: 4px;
}
.van-card__thumb {
  width: 120px;
  height: 120px;
}
table {
  width: 100%;
}
tr {
  font-size: 12px;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  line-height: 30px;
}
tr:nth-of-type(2n) {
  background-color: #87ceeb38;
}
td:nth-child(1) {
  width: 12vw;
  text-align: center;
  margin-right: 2vw;
}
td:nth-child(2) {
  width: 30vw;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
td:nth-child(3) {
  width: 25vw;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
td:nth-child(4) {
  width: 30vw;
  font-weight: normal;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
